import Map, { Marker } from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
import { mapStyle, zuoBiaos } from '@/utils';
import useRoute from '@/hooks/useRoute';
import { useState } from 'react';

export default function MapDemo() {
  const { goto } = useRoute();
  const [viewState, setViewState] = useState<any>({
    longitude: zuoBiaos[0]?.longitude,
    latitude: zuoBiaos[0]?.latitude,
    zoom: 5,
  });

  function markClick(e: any) {
    const { lng, lat } = e.target._lngLat;
    goto(`/demo/detail?longitude=${lng}&latitude=${lat}`);
  }

  return (
    <div className="basicMapWrap">
      <div className="bccon">
        <Map
          {...viewState}
          style={{ width: '100%', height: 600 }}
          mapStyle={mapStyle}
          onClick={(evt) => console.log('evt: ', evt)}
          onMove={(evt) => setViewState(evt.viewState)}
          onZoomEnd={(evt) => setViewState(evt.viewState)}
        >
          {zuoBiaos.map((item: any, i: number) => (
            <Marker
              longitude={item?.longitude}
              latitude={item?.latitude}
              color="red"
              onClick={markClick}
              key={i}
            />
          ))}
        </Map>
      </div>
    </div>
  );
}
